<%@page import="java.util.ResourceBundle"%>
<%-- Form Function --%>
<script type="text/javascript">
<%ResourceBundle resource = ResourceBundle.getBundle("Constant_en");%>
var dataStatus =  <%= resource.getString("cureplan.status") %>;
var strSelectDefault = "<%= resource.getString("project.select.default") %>";
    
    $(document).ready(function() {
        populateSelect($('#ddlStatus').get(0), dataStatus, strSelectDefault);
        $("#formSearch").find("input, textarea, select, button").uniform();
        $("#btnReset").click(function(){
            $("#formSearch").get(0).reset();
            populateSelect($('#ddlStatus').get(0), dataStatus, strSelectDefault);
            $.uniform.update(" input, textarea, select, button");
            return false});

        $("#formSearch").validate({
            submitHandler: function(form) {
                gridReload();
                //$(form).ajaxSubmit();
            }
        });
        var options = {
            target:        '#output1',   // target element(s) to be updated with server response
            beforeSubmit:  showRequest,  // pre-submit callback
            success:       showResponse  // post-submit callback

            // other available options:
            //url:       url         // override for form's 'action' attribute
            //type:      type        // 'get' or 'post', override for form's 'method' attribute
            //dataType:  null        // 'xml', 'script', or 'json' (expected server response type)
            //clearForm: true        // clear all form fields after successful submit
            //resetForm: true        // reset the form after successful submit

            // $.ajax options can be used here too, for example:
            //timeout:   3000
        };

        // bind form using 'ajaxForm'
        $('#formSearch').ajaxForm(options);
    });

    // pre-submit callback
    function showRequest(formData, jqForm, options) {
        // formData is an array; here we use $.param to convert it to a string to display it
        // but the form plugin does this for you automatically when it submits the data
        var queryString = $.param(formData);

        // jqForm is a jQuery object encapsulating the form element.  To access the
        // DOM element for the form do this:
        // var formElement = jqForm[0];

        alert('About to submit: \n\n' + queryString);

        // here we could return false to prevent the form from being submitted;
        // returning anything other than false will allow the form submit to continue
        return true;
    }

    // post-submit callback
    function showResponse(responseText, statusText, xhr, $form)  {
        // for normal html responses, the first argument to the success callback
        // is the XMLHttpRequest object's responseText property

        // if the ajaxForm method was passed an Options Object with the dataType
        // property set to 'xml' then the first argument to the success callback
        // is the XMLHttpRequest object's responseXML property

        // if the ajaxForm method was passed an Options Object with the dataType
        // property set to 'json' then the first argument to the success callback
        // is the json data object returned by the server

        alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
            '\n\nThe output div should have already been updated with the responseText.');
    } 
</script>
<%-- End Form Function --%>

<%-- jQGrid Init  --%>
<script type="text/javascript">
jQuery.extend($.fn.fmatter , {
    imageButtonFormatter : function imageButtonFormatter(cellvalue, options, rowdata) {
    return "<a href=\"javascript:ContentAjaxRequest('SRV/CureplanDetail?curePlanId=" + rowdata[0] + "&fromPage=SRV_CureplanList', 'section #container')\" ><img src='<%=request.getContextPath()%>/images/view_icon.gif' /></a> ";
}
});
jQuery.extend($.fn.fmatter.imageButtonFormatter , {
    unformat : function(cellvalue, options) {
    return cellvalue;
}
});

</script>
<script type="text/javascript">
  
   $(function() {
        $("#grid").jqGrid({
            url:'<%=request.getContextPath()%>/SRV/SRV_CureplanList/grd_search',
            datatype: 'json',
            mtype: 'POST',
            colNames:['Id','Service Name', 'Price', 'Currency', 'Doctor Name', 'Hospital','Status','Select'],
            colModel:[
                {name:'ID',index:'id', width:40},
                {name:'serviceName',index:'srvCureservice.name', width:150},
                {name:'price',index:'srvCureservice.price', width:80},
                {name:'currency',index:'srvCureservice.currency', width:105},
                {name:'doctorName',index:'srvCureservice.mDoctor.name', width:200},
                {name:'hospitalName',index:'hospitalName', width:200, sortable:false},
                {name:'Status',index:'status', width:80} ,
                {name:'Detail',index:'Detail', align:'center', width:100, sortable:false,formatter:'imageButtonFormatter'}
       ],
            postData: {
            },
            rowNum:20,
            rowList:[20,40,60],
            height: 200,
            width: 940,
            rownumbers: true,
            pager: '#pager',
            sortname: 'id',
            viewrecords: true,
            sortorder: "asc",
            caption:"Products",
            emptyrecords: "Empty records",
            loadonce: false,
           
            jsonReader : {
                root: "rows",
                page: "page",
                total: "total",
                records: "records",
                repeatitems: true, //if 'false' will chage json reader format to 'name' require
                //cell: "cell",
                id: "0" //id: "id"
            }
        });
        $("#grid").jqGrid('navGrid','#pager',
        {edit:false,add:false,del:false,search:false},
        { },
        { },
        { },
        {
            sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
            closeOnEscape: true,
            multipleSearch: true,
            closeAfterSearch: true }
    );
    
    }
);
    function formatOperations(cellvalue) {
      return "<a href='SearchService.jsp?id=" + cellvalue +"'></a>  ";
  	    
  }
    //jQuery("#grid").setGridWidth(800, true)
</script>

<%-- End jQGrid Init --%>

<%-- jQGrid Search Function --%>
<script type="text/javascript">
    function gridReload(){
        var txtName = jQuery("#txtName").val();
        var txtPrice = jQuery("#txtPrice").val();
        var txtCurrency = jQuery("#txtCurrency").val();
        var txtDoctorName = jQuery("#txtDoctorName").val();
        var ddlStatus = jQuery("#ddlStatus").val();
        jQuery("#grid").jqGrid('setGridParam'
        ,{url:"<%=request.getContextPath()%>/SRV/SRV_CureplanList/grd_search"
                +"?txtName="+txtName
                +"&txtPrice="+txtPrice
                +"&txtCurrency="+txtCurrency
                +"&txtDoctorName="+txtDoctorName
                +"&ddlStatus="+ddlStatus
            ,page:1}).trigger("reloadGrid");
    }
</script>
<%-- End jQGrid Search Function --%>

<div class="grid_16">
    <!-- insert content here -->

    <form id="formSearch" class="form" action="" method="">
       <table class="bgTable">

            <tr >
                <td colspan="4" class="bgheader" ><h5>Search</h5></td>
            </tr>
            <tr >
                <td colspan="4" class="bgtop" >&nbsp;</td>
            </tr>
            <tr >
                <td  class="bgCellNormal">Service Name ::&nbsp;</td>
                <td class="bgCellInput"><input type="text" name="txtName" id="txtName" class="" value="" /></td>
                <td  class="bgCellNormal">Service Currency ::&nbsp;</td>
                <td  class="bgCellInput"><input type="text" name="txtCurrency" id="txtCurrency" class="" value="" /></td>
            </tr>
            <tr>
              <td class="bgCellNormal" >Service Price ::&nbsp;</td>
              <td class="bgCellInput" ><input type="text" name="txtPrice" id="txtPrice" class="" value="" /></td>
              <td class="bgCellNormal"  >Doctor name ::&nbsp;</td>
              <td class="bgCellInput" ><input type="text" name="txtDoctorName" id="txtDoctorName" class="" value="" /></td>
            </tr>
            <tr>
                <td class="bgCellNormal" >Status ::&nbsp;</td>
                <td class="bgCellInput" ><select id="ddlStatus" name="ddlStatus" class=""></select></td>
                <td class="bgCellNormal"  >&nbsp;</td>
                <td class="bgCellInput" >&nbsp;</td>
            </tr>
            <tr>
                <td colspan="4"  class="bgbutton">
                   <input type="reset" name="btnReset2" id="btnReset2" value="Reset" /> &nbsp;&nbsp;
                   <input type="submit" name="btnSubmit2" id="btnSubmit2" value="Search" /> </td>
            </tr>
        </table>
  </form>
    <br />
    <div id="content-placeholder">

        <div id="jqgrid">
            <table id="grid"></table>
            <div id="pager"></div>
        </div>

        <div id="dialog" title="Feature not supported" style="display:none">
            <p>That feature is not supported.</p>
        </div>

        <div id="dialogSelectRow" title="Warning" style="display:none">
            <p>Please select row</p>
        </div>
    </div>
    <div id="dialogp" class="medhub_dialog" title="Treatment Information" style="display:none;">

        <div id="tabs">
            <ul>
                <li><a href="#fragment-1"><span>Service</span></a></li>
                <li><a href="#fragment-2"><span>Doctor</span></a></li>
                <li><a href="#fragment-3"><span>Hospital</span></a></li>
            </ul>
            <div id="fragment-1">
                <table width="391" border="0">
                    <tr>
                        <td width="8" rowspan="5">&nbsp;</td>
                        <td width="11">&nbsp;</td>
                        <td width="139"><em>Service name</em></td>
                        <td width="10">&nbsp;</td>
                        <td width="203"><label  id="name_service"></label></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td><em>Price</em></td>
                        <td>&nbsp;</td>
                        <td><label  id="price_service"></label></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td><em>Currency</em></td>
                        <td>&nbsp;</td>
                        <td><label  id="currency_service"></label></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td></td>
                    </tr>
                </table>
            </div>
            <div id="fragment-2">
                <table width="360" border="0">
                    <tr>
                        <td width="8" rowspan="4"><div id ="showDoctor"></div></td>
                        <td width="80">&nbsp;</td>
                        <td width="80"><em>Name</em></td>
                        <td width="21">&nbsp;</td>
                        <td width="175"><label  id="Doctor_name"></label></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td><em>Surname</em></td>
                        <td>&nbsp;</td>
                        <td> <label  id="Doctor_surname"></label></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td><em>Code</em></td>
                        <td>&nbsp;</td>
                        <td><label  id ="Doctor_code"></label></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td><em>sex</em> </td>
                        <td>&nbsp;</td>
                        <td><label  id ="Doctor_sex"></label></td>
                    </tr>
                </table>
            </div>
            <div id="fragment-3">
                <table width="440" border="0">
                    <tr>
                        <td width="8" rowspan="5"><div id ="showhospital"></div></td>
                        <td width="14">&nbsp;</td>
                        <td width="74"><em>Name</em></td>
                        <td width="11">&nbsp;</td>
                        <td width="287"><label  id="Hospital_name"></label></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td><em>Location</em></td>
                        <td>&nbsp;</td>
                        <td> <label  id="Hospital_location"></label></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td><em>Level</em></td>
                        <td>&nbsp;</td>
                        <td><label  id ="Hospital_hospitalLevel"></label></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td><em>Latitude</em></td>
                        <td>&nbsp;</td>
                        <td><label  id ="Hospital_latitude"></label></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td><em>Longtitude</em></td>
                        <td>&nbsp;</td>
                        <td><label  id ="Hospital_longtitude"></label></td>
                    </tr>
                </table>
  </form>
    <br />
    <div id="content-placeholder">
        <div id="jqgrid">
            <table id="grid"></table>
            <div id="pager"></div>
        </div>
    </div>
</div>
